<template>
  <div>
    <div class="page_tab_top">
      <div
        class="tab_list_item"
        @click="cutTab(1)"
        :class="currentIndex === 1 ? 'tab_active' : ''"
      >
        基础配置
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(2)"
        :class="currentIndex === 2 ? 'tab_active' : ''"
      >
        通用配置
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(3)"
        :class="currentIndex === 3 ? 'tab_active' : ''"
      >
        充值规则
      </div>
      <!-- <div
        class="tab_list_item"
        @click="cutTab(4)"
        :class="currentIndex === 4 ? 'tab_active' : ''"
      >
        规则分类
      </div> -->
      <div
        class="tab_list_item"
        @click="cutTab(5)"
        :class="currentIndex === 5 ? 'tab_active' : ''"
      >
        充值提成
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(6)"
        :class="currentIndex === 6 ? 'tab_active' : ''"
      >
        待客提成
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(7)"
        :class="currentIndex === 7 ? 'tab_active' : ''"
      >
        约客提成
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(8)"
        :class="currentIndex === 8 ? 'tab_active' : ''"
      >
        档位配置
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(9)"
        :class="currentIndex === 9 ? 'tab_active' : ''"
      >
        跨店结算比例
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(10)"
        :class="currentIndex === 10 ? 'tab_active' : ''"
      >
        统一封账时间
      </div>
      <div
        class="tab_list_item"
        @click="cutTab(11)"
        :class="currentIndex === 11 ? 'tab_active' : ''"
      >
        公户配置
      </div>
    </div>
    <ProjecSet ref="ProjecSet" v-show="this.currentIndex === 1"></ProjecSet>
    <general ref="general" v-show="this.currentIndex === 2"></general>
    <recharge ref="recharge" v-show="this.currentIndex === 3"></recharge>
    <!-- <ruleSort ref="ruleSort" v-show="this.currentIndex === 4"></ruleSort> -->

    <Rechcom ref="Rechcom" v-show="this.currentIndex === 5"></Rechcom>
    <Hospitality
      ref="Hospitality"
      v-show="this.currentIndex === 6"
    ></Hospitality>
    <Appointments
      ref="Appointments"
      v-show="this.currentIndex === 7"
    ></Appointments>
    <GearConfiguration
      ref="GearConfiguration"
      v-show="this.currentIndex === 8"
    ></GearConfiguration>
    <cross-store-settlement-ratio
      ref="CrossStoreSettlementRatio"
      v-show="this.currentIndex === 9"
    ></cross-store-settlement-ratio>
    <achievementCom
      ref="achievementCom"
      v-show="this.currentIndex === 10"
    ></achievementCom>
    <PublicConfiguration
      ref="PublicConfiguration"
      v-show="this.currentIndex === 11"
    ></PublicConfiguration>
  </div>
</template>

<script>
import ProjecSet from "./ProjecSet.vue";
import general from "./general.vue";
import recharge from "./recharge.vue";
import ruleSort from "./ruleSort.vue";
import Rechcom from "./Rechcom.vue";
import Hospitality from "./Hospitality.vue";
import Appointments from "./Appointments.vue";
import achievementCom from "./achievementCom.vue";
import GearConfiguration from "./GearConfiguration";
import CrossStoreSettlementRatio from "./CrossStoreSettlementRatio.vue";
import PublicConfiguration from "./PublicConfiguration.vue";

export default {
  components: {
    ProjecSet,
    general,
    recharge,
    ruleSort,
    Rechcom,
    Hospitality,
    Appointments,
    achievementCom,
    GearConfiguration,
    CrossStoreSettlementRatio,
    PublicConfiguration,
  },
  name: "EryuoaStoreFrontendIndex",

  data() {
    return {
      currentIndex: 1,
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.changeChild();
    });
  },

  methods: {
    //  // 顶部tab切换
    cutTab(i) {
      this.currentIndex = i;
      this.changeChild();
    },

    changeChild() {
      if (this.currentIndex === 1) {
        this.$refs.ProjecSet.resQ();
      } else if (this.currentIndex === 2) {
        this.$refs.general.resQ();
        this.$refs.general.getUser();
      } else if (this.currentIndex === 3) {
        this.$refs.recharge.resQ();
      }
      // else if (this.currentIndex === 4) {
      //   this.$refs.ruleSort.resQ();
      // }
      else if (this.currentIndex === 5) {
        this.$refs.Rechcom.resQ();
      } else if (this.currentIndex === 6) {
        this.$refs.Hospitality.resQ();
      } else if (this.currentIndex === 7) {
        this.$refs.Appointments.resQ();
      } else if (this.currentIndex === 8) {
        this.$refs.GearConfiguration.resQ();
      } else if (this.currentIndex === 9) {
        this.$refs.CrossStoreSettlementRatio.resQ();
      } else if (this.currentIndex === 10) {
        this.$refs.achievementCom.resQ();
      } else if (this.currentIndex === 11) {
        this.$refs.PublicConfiguration.resQ();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
